<template>
  <basic-container>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row type="flex" class="row-bg" justify="end">
        <el-form-item>
          <el-button @click="handleCancel">关闭</el-button>
        </el-form-item>
      </el-row>
      <el-card shadow="hover" class="approval_info">
        <div slot="header" style="cursor: pointer" @click="approvalClick">
          <span>审批信息</span>
        </div>
        <div :class="{approval: this.approvalInfo}">
          <el-form-item label="申请人">
            <el-input :disabled="true" v-model="form.applicantName" />
          </el-form-item>
          <el-form-item label="代号">
            <el-input :disabled="true" v-model="form.drawingNumber" />
          </el-form-item>
          <el-form-item label="名称">
            <el-input :disabled="true" v-model="form.drawingName" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input :disabled="true" type="textarea" v-model="form.comment" />
          </el-form-item>
        </div>
      </el-card>
      <el-card shadow="hover">
        <div slot="header" style="cursor: pointer" @click="processClick">
          <span>流程信息</span>
        </div>
        <div :class="{process: this.processInfo}">
          <el-row type="flex" class="row-bg">
            <el-timeline>
              <el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
                <el-card shadow="hover">
                  <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                  <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
                  <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                  <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </div>
      </el-card>
      <el-card shadow="hover">
        <div slot="header" style="cursor: pointer" @click="processTrackClick">
          <span>流程跟踪</span>
        </div>
        <div :class="{processTrack: this.processTrackInfo}">
          <el-row type="flex" class="row-bg">
            <img :src="src" alt="design">
          </el-row>
        </div>
      </el-card>
      <!--<el-card shadow="hover">
        <div slot="header" style="cursor: pointer" @click="planeDrawClick">
          <span>平面图纸</span>
        </div>
        <div :class="{planeDraw: this.planeDrawInfo}">
          &lt;!&ndash;<el-form-item>
            <el-button>上传</el-button>
          </el-form-item>&ndash;&gt;
          <el-form-item v-for="drawing in this.planeDrawingList">
            <a :href="drawing.link">{{drawing.originalName}}</a>
            &lt;!&ndash;<span style="font-size:22px; margin-left: 50px; cursor: pointer; color: #191970" title="删除" @click="deletePlaneDrawing(drawing)">⊗</span>&ndash;&gt;
          </el-form-item>
        </div>
      </el-card>
      <el-card shadow="hover">
        <div slot="header" style="cursor: pointer" @click="dimensionalDrawClick">
          <span>三维图纸</span>
        </div>
        <div :class="{dimensionalDraw: this.dimensionalDrawInfo}">
          &lt;!&ndash;<el-form-item>
            <el-button>上传</el-button>
          </el-form-item>&ndash;&gt;
          <el-form-item v-for="drawing in this.dimensionalDrawingList">
            <a :href="drawing.link">{{drawing.originalName}}</a>
            &lt;!&ndash;<span style="font-size:22px; margin-left: 50px; cursor: pointer; color: #191970" title="删除" @click="deleteDimensionalDrawing(drawing)">⊗</span>&ndash;&gt;
          </el-form-item>
        </div>
      </el-card>-->
      <el-card shadow="hover">
        <div slot="header" style="cursor: pointer" @click="planeDrawClick">
          <span>图纸详情</span>
        </div>
        <avue-crud :data="drawingData"
                   :option="drawingOption"
                   v-model="drawingForm"
                   ref="drawingTable">
          <!--<template slot="menuLeft">
            &lt;!&ndash;<el-button type="primary" @click="handleApproval">审核</el-button>&ndash;&gt;
            <el-button type="primary" @click="handleAgree">同意</el-button>
            <el-button type="danger" @click="handleDisagree">驳回</el-button>
          </template>-->
          <template slot="originalName" slot-scope="scope">
            <a class="buttonText"
               style="cursor:pointer;color:#0000cc;text-decoration:underline"
               :href="scope.row.link">
              {{ scope.row.originalName }}
            </a>
          </template>

          <!--<template slot="approvalResult" slot-scope="scope">
            <div @change="handleDrawingApproval(scope.row)">
              <input type="radio" v-model="scope.row.approvalResult" value="1"> 同意
              <input type="radio" v-model="scope.row.approvalResult" value="0"> 驳回
            </div>
          </template>

          <template slot="approvalOpinion" slot-scope="scope">
            <el-input v-model="scope.row.approvalOpinion" @blur="handleDrawingApproval(scope.row)"/>
          </template>-->
        </avue-crud>
      </el-card>
    </el-form>
  </basic-container>
</template>

<script>
  import {historyFlowList, leaveDetail} from "@/api/work/process";
  import {getDrawingApprovalDetail} from "@/api/drawing/drawingapproval";
  import {getPdfByUploadId, getThreeByUploadId, findDrawingListByUploadId, getDetail} from "@/api/drawing/drawingupload";

  export default {
    data() {
      return {
        drawingData: [],
        drawingForm: {},
        drawingOption: {
          menu:false,
          tip: false,
          selection: false,
          columnBtn:false,
          refreshBtn:false,
          searchBtn:false,
          saveBtn:false,
          updateBtn:false,
          cancelBtn:false,
          addBtn:false,
          delBtn:false,
          editBtn:false,
          page:false,
          align:'center',
          menuAlign:'center',
          index: true,
          indexLabel: '序号',
          height:500,
          calcHeight: 500,
          column:[
            {
              label: "图纸名称",
              prop: "originalName",
              slot: true,
            },
            {
              label: "图纸类型",
              prop: "type",
            }
          ]
        },
        businessId: '',
        processInstanceId: '',
        src: '',
        flowList: [],
        form: {
          applicantName: '',
          drawingNumber: '',
          drawingName: '',
          comment: '',
        },
        approvalInfo: false,
        processInfo: false,
        processTrackInfo: false,
        planeDrawInfo: false,
        dimensionalDrawInfo: false,
        planeDrawingList: [],
        dimensionalDrawingList: [],
      }
    },
    created() {
      this.init();
    },
    methods: {
      deletePlaneDrawing(planeDrawing) {
        this.planeDrawingList.splice(this.planeDrawingList.indexOf(planeDrawing), 1);
      },
      deleteDimensionalDrawing(planeDrawing) {
        this.dimensionalDrawingList.splice(this.dimensionalDrawingList.indexOf(planeDrawing), 1);
      },
      init() {
        this.processInstanceId = this.$route.params.processInstanceId;
        this.businessId = this.$route.params.businessId;
        let drawingUploadId = this.$route.params.drawingUploadId;
        this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}`;
        historyFlowList(this.processInstanceId).then(res => {
          const data = res.data;
          if (data.success) {
            this.flowList = data.data;
          }
        })
        getDrawingApprovalDetail(this.businessId).then(res => {
          const data = res.data;
          if (data.success) {
            this.form = data.data;
          }
        })
        /*getPdfByUploadId(drawingUploadId).then(res => {
          const data = res.data.data;
          this.planeDrawingList = data;
        })
        getThreeByUploadId(drawingUploadId).then(res => {
          const data = res.data.data;
          this.dimensionalDrawingList = data;
        })*/

        getDetail(this.$route.params.drawingUploadId).then(res => {
          const result = res.data.data;
          this.form.drawingNumber = result.drawingNumber;
          this.form.drawingName = result.drawingName;
        })

        let taskDefinitionKey = this.$route.params.taskDefinitionKey;
        findDrawingListByUploadId(drawingUploadId, taskDefinitionKey).then(res => {
          this.drawingData = res.data.data;
        })
      },
      handleCancel() {
        this.$router.$avueRouter.closeTag();
        // this.$router.push({path: `/work/start`});
        this.$router.go(-1);
      },
      approvalClick() {
        this.approvalInfo = !this.approvalInfo;
      },
      processClick() {
        this.processInfo = !this.processInfo;
      },
      processTrackClick() {
        this.processTrackInfo = !this.processTrackInfo;
      },
      planeDrawClick() {
        this.planeDrawInfo = !this.planeDrawInfo;
      },
      dimensionalDrawClick() {
        this.dimensionalDrawInfo = !this.dimensionalDrawInfo;
      }
    }
  }
</script>

<style>
  /*.approval_info .el-card__body{
    display: none;
  }*/
  .approval{
    display: none;
  }

  .process{
    display: none;
  }

  .processTrack {
    display: none;
  }

  .planeDraw {
    display: none;
  }

  .dimensionalDraw {
    display: none;
  }

  .avue-crud__menu {
    min-height: 0px;
  }
</style>
